<template>
    <div class="contractdetail">
        <div class="nav"><button @click="back()"><i class="iconfont icon-left"></i></button>合同详情</div>
        <div class="contractInfo" v-if="showContractInfo">
        <div class="info">
            <div class="ht" @click="handleViewContrat()">
                <i class="iconfont icon-hetong1" style="font-size: 110px;line-height: 80px;"></i>
                <p>查看合同</p>
            </div>
            <div class="info1">
                <p style="font-size:16px;padding-bottom: 15px;">{{showInfo.contractTitle}}</p>
                <p>
                    <span class="span-left">签署状态</span>
                    <span class="span-right cff6">
                        <span v-if="showInfo.contractStatus=='WAIT_USER_SIGN'">待签署</span>
                        <span v-else-if="showInfo.contractStatus=='WAIT_COMPANY_SIGN' && showInfo.contractStatus=='WAIT_LOCK'">待企业签署</span>
                        <span v-else-if="showInfo.contractStatus=='FILE'">签约完成</span>
                        <span v-else-if="showInfo.contractStatus=='LOCK'">待归档</span>
                        <span v-else-if="showInfo.contractStatus=='SIGN_OVERDUE'">已失效</span>
                    </span>
                </p>
                <p>
                    <span class="span-left">发件方</span>
                    <span class="span-right">{{showInfo.sendUserEnterpriseName}}</span>
                </p>
                <p>
                    <span class="span-left">合同编号</span>
                    <span class="span-right">{{showInfo.contractId}}</span>
                </p>
                <p>
                    <span class="span-left">发送日期</span>
                    <span class="span-right">{{showInfo.sendTime}}</span>
                </p>
                <p>
                    <span class="span-left">签约截止日</span>
                    <span class="span-right">{{showInfo.signDeadLine}}</span>
                </p>
            </div>
        </div>
        <p class="contitle" style="font-size: 18px;">签约方</p>
        <p class="contitle">管理企业</p>
        <div class="contractdetails_warp">
            <p class="p1">{{showInfo.sendUserEnterpriseName}}</p>
            <p>
                <span class="span-left">经办人</span>
                <span class="span-right">{{showInfo.sendUserName}}</span>
            </p>
            <p>
                <span class="span-left">状态</span>
                <span class="span-right cff6">
                     <span v-if="showInfo.sendSignStatus==1">完成</span>
                     <span v-else-if="showInfo.sendSignStatus==3">拒绝</span>
                     <span v-else-if="showInfo.sendSignStatus==-1">已失效</span>
                     <span v-else>待签署</span>
                </span>
            </p>
        </div>
        <p class="contitle otherSignSourceCompany" v-if="showInfo.otherSignSourceCompany!=''">客户企业</p>
        <div class="contractdetails_warp" v-for="(item,index) in showInfo.otherSignSourceCompany" :key="index">
            <p class="p1">{{item.sourceCompanyName}}</p>
            <p>
                <span class="span-left">状态</span>
                <span class="span-right cff6">
                    <span v-if="item.sourceCompanySignStatus==1">完成</span>
                    <span v-else-if="item.sourceCompanySignStatus==3">拒绝</span>
                    <span v-else-if="item.sourceCompanySignStatus==-1">已失效</span>
                    <span v-else>待签署</span>
                </span>
            </p>
        </div>

        <p class="contitle otherSingUser">签约用户</p>
        <div class="contractdetails_warp" v-for="(item,index) in showInfo.otherSingUser" :key="index">
            <p class="p1">{{item.otherReceiveUserName}}</p>
            <p>
                <span class="span-left">状态</span>
                <span class="span-right cff6">
                    <span v-if="item.otherReceiveSignStatus==1">完成</span>
                    <span v-else-if="item.otherReceiveSignStatus==3">拒绝</span>
                    <span v-else-if="item.otherReceiveSignStatus==-1">已失效</span>
                    <span v-else>待签署</span>
                </span>
            </p>
        </div>

        <div class="contractdetails_warp">
            <p class="p1">{{showInfo.receiveUserName}}</p>
            <p>
                <span class="span-left">账号</span>
                <span class="span-right">{{showInfo.receiveUserAccount}}</span>
            </p>
            <p>
                <span class="span-left">状态</span>
                <span class="span-right cff6">
                    <span v-if="showInfo.receiveSignStatus==1">完成</span>
                    <span v-else-if="showInfo.receiveSignStatus==3">拒绝</span>
                    <span v-else-if="showInfo.receiveSignStatus==-1">已失效</span>
                    <span v-else>待签署</span>
                </span>
            </p>
            <div class="sign" v-if="showInfo.contractStatus=='WAIT_USER_SIGN' || showInfo.receiveSignStatus==''" @click="handleOperateUrl(showInfo.operateUrl)">马上签约</div>
            <div class="sign sign_gray_btn" v-else>马上签约</div>
        </div>
    </div>
    <div class="wrap" style="width: 100%;height: 100%;overflow-x: hidden;" v-if="showiframe">
        <iframe :src="src" height="800" style="width: 100%;padding: 0;margin: 0;border: 0 none;"></iframe>
    </div>
</div> 
    <!-- <div id="wrap" style="width: 100%;height: 100%;overflow-x: hidden;">
        <iframe src="" height="800" style="width: 100%;padding: 0;margin: 0;border: 0 none;"></iframe>
    </div> -->
</template>
<script>
    import { contractMessage , contractPreview } from "./../../api/index";
    import { Toast , MessageBox } from 'mint-ui'
    export default {
      name: 'contractdetail',
      data () {
        return {
            showInfo:{},
            src:'',
            showContractInfo:true,
            showiframe:false
        }
      },
      activated(){
        this.getContractMessage();
      },
      methods:{
        getContractMessage(){
            contractMessage(this.$route.query.contractId).then(response => {
            this.showInfo = response.data
            }).catch(()=>{});
        },
        handleOperateUrl(url){
            location.href = url;
        },
        back(){
            //this.$router.back();
            this.$router.push("/home");
            this.showContractInfo = true;
            this.showiframe = false; 
        },
        //查看合同
        handleViewContrat(){
            contractPreview(this.$route.query.contractId).then(response => {
                this.src = response.data.url;
                this.showContractInfo = false;
                this.showiframe = true; 
            }).catch(()=>{});
        }
      }
    }
    </script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .contractdetail
        font-size 14px
        overflow: hidden;
        .info
            background #fff
            padding 20px 0px
            display flex
            flex-flow row nowrap
            justify-content flex-start
            .ht
                color #999
                p
                    text-align center
                    line-height 25px
            .info1
                width: 67%;
                p
                    line-height 20px
                    display flex
                    padding-bottom 10px
                    .span-left
                        width 38% 
                        color #333
                    .span-right
                        width 60% 
                        color #999
                        word-break break-all
                    .cff6
                        color #ff6600    
        .contitle
            padding 20px 10px 15px
            color #999
        .contractdetails_warp
            .sign
                position absolute
                top 36%
                right 5%
                background #0077ff
                color #fff
                padding 10px
                border-radius 20px
            .sign_gray_btn
                background #ccc    
            background #fff
            padding 10px
            position relative
            .p1
                font-size 16px
                padding-bottom 5px
            p
                line-height 30px
                display flex
            .span-left
                width 20%
                color #333
            .span-right
                width 80%
                color #999
            .cff6
                color #ff6600    
            
    </style>